<template>
  <div class="on-study-box" v-if="details.course">
    <div ref="header2">
      <nav-bar
        :isFixed="true"
        :title="'课程详情'"
        right-text="证书查询"
        @onClickRight="onClickRight"
      ></nav-bar>
    </div>

    <van-image
      fit="cover"
      width="100%"
      height="120"
      style="margin-top: 46px"
      :src="imgUrl + details.course.detailImage"
    />
    <div class="on-study-list">
      <div class="details-title">{{ details.course.courseTitle }}</div>
    </div>
    <div class="off-line"></div>
    <div class="details-box">
      <van-tabs v-model="active" scrollspy sticky>
        <van-tab title="课程介绍">
          <myTitle title="课程介绍"></myTitle>
          <div class="on-off-lin"></div>
          <div
            class="html-p-font-size v-html-img"
            v-html="details.course.courseIntroduction"
          ></div>
        </van-tab>
        <van-tab title="报名流程">
          <myTitle title="报名流程"></myTitle>
          <div class="on-off-lin"></div>
          <p class="look-title">
            注：本课程仅对会员开放，如未通过会员认证，请先前往认证。否则无法开通课程
          </p>
          <iconTitleCont :coures="details.course"></iconTitleCont>
        </van-tab>
        <van-tab title="学习进度">
          <myTitle title="学习进度"></myTitle>
          <div class="on-off-lin"></div>
          <studyPlan :playList="playList" @handSta="handSta"></studyPlan>
        </van-tab>
        <van-tab>
          <template #title>
            <div :class="!ifAddRess && isBook ? 'if-unread' : ''">证书领取</div>
          </template>
          <myTitle title="证书领取"></myTitle>
          <div class="on-off-lin"></div>
          <getBook
            @onSubmit="onSubmit"
            ref="getBook"
            :isBook="isBook"
            :ifAddRess="ifAddRess"
          ></getBook>
        </van-tab>
      </van-tabs>
    </div>
    <div v-if="!isOpenStudy" class="open-study-btn" @click="handOpenStudy">
      开通课程
    </div>
  </div>
</template>

<script>
import noData from "@/components/noData/index.vue";
import navBar from "@/components/NavBar";
import myTitle from "@/components/myTitle/index.vue";
import iconTitleCont from "@/components/iconTitleCont/index.vue";
import studyPlan from "@/components/studyPlan/index.vue";
import getBook from "@/components/getBook/index.vue";
export default {
  name: "ActivityList",
  components: {
    navBar,
    myTitle,
    iconTitleCont,
    studyPlan,
    getBook,
  },
  data() {
    return {
      active: 0,
      courseId: "",
      isBook: false,
      list: [],
      loading: false,
      finished: false,
      imgUrl: config.imgUrl,
      param: {
        page: 0,
        pageSize: 20,
      },
      details: {},
      playList: [],
      ifAddRess: false,
      isOpenStudy: false,
      offsetTop: 0,
    };
  },
  methods: {
    async handSta(item) {
      console.log(this.details.course);
      switch (item.status) {
        case 1: //点击解锁
          let unlockCourseProgress = await this.$request({
            url: "/course/unlockCourseProgress",
            method: "post",
            data: { courseId: this.courseId },
          });
          if (unlockCourseProgress.code == 200) {
            this.$toast.success("解锁成功!");
          } else {
            this.$toast.fail(unlockCourseProgress.content);
          }
          this.init();
          break;
        case 2: //立即学习
          this.$router.push({
            name: "videoStudy",
            query: {
              courseId: this.courseId,
              classId: item.classId,
              courseIntroduction: this.details.course.courseIntroduction,
            },
          });
          break;
        case 3: //学习完成
          this.$router.push({
            name: "videoStudy",
            query: {
              courseId: this.courseId,
              classId: item.classId,
              courseIntroduction: this.details.course.courseIntroduction,
            },
          });
          break;

        default:
          break;
      }
    },
    onClickRight() {
      this.$router.push({
        name: "bookSearch",
        query: {
          courseId: this.$route.query.awardId,
        },
      });
    },
    handOpenStudy() {
      this.$router.push({
        name: "openStudyForm",
        query: {
          courseId: this.$route.query.awardId,
        },
      });
    },
    async onSubmit() {
      let form = this.$refs.getBook.form;
      form.courseId = this.$route.query.awardId;
      let adderss = await this.$request({
        url: "certificate/addMailingAddress",
        method: "post",
        data: form,
      });
      this.init();
    },
    async init() {
      console.log(this.$route.query);
      let res = await this.$request({
        url: "/course/findCourseOne",
        method: "post",
        data: { courseId: this.$route.query.awardId },
      });
      this.details = res.data;
      //查询学习进度列表
      let res2 = await this.$request({
        url: "/course/findCourseProgressList",
        method: "post",
        data: { courseId: this.$route.query.awardId },
      });
      this.playList = res2.data;
      //查询是否有证书
      let isGeneratorCertificate = await this.$request({
        url: "/certificate/isGeneratorCertificate",
        method: "post",
        data: { courseId: this.$route.query.awardId },
      });
      this.isBook = isGeneratorCertificate.data;
      //查询开通课程
      let verificationIsOpenCourse = await this.$request({
        url: "/course/verificationIsOpenCourse",
        method: "post",
        data: { courseId: this.$route.query.awardId },
      });
      this.isOpenStudy = verificationIsOpenCourse.data;
      //查询邮寄地址
      let adderss = await this.$request({
        url: "/certificate/findMailingAddress",
        method: "post",
        data: { courseId: this.$route.query.awardId },
      });
      this.ifAddRess = adderss.data;
      if (this.ifAddRess) {
        this.$refs.getBook.form = this.ifAddRess;
      }
    },
  },
  async mounted() {
    this.courseId = this.$route.query.awardId;
    await this.init();
    this.$nextTick(() => {
      // this.offsetTop = this.$refs.header2.offsetHeight;
      // console.log(this.$refs.header2.offsetHeight);
    });
  },
};
</script>

<style lang="scss">
@import "../assets/css/base";

.on-study-box {
  .van-cell.van-field {
    flex-direction: column;
  }
  .van-sticky--fixed {
    top: 46px;
  }
  .van-tabs__line {
    background-color: #0050a5;
  }
  .van-tab__text.van-tab__text--ellipsis {
    overflow: inherit;
  }
  .if-unread {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: px2rem(10);
      height: px2rem(10);
      background-color: #d71a1a;
      border-radius: 50%;
      right: px2rem(-10);
      top: px2rem(-10);
    }
  }
  .open-study-btn {
    height: px2rem(100);
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #0050a5;
    line-height: px2rem(100);
    text-align: center;
    color: #fff;
    font-size: px2rem(32);
  }
  .on-off-lin {
    width: 100%;
    height: px2rem(1);
    background-color: #ededed;
    margin-bottom: px2rem(30);
  }
  .details-box {
    box-sizing: border-box;
    padding: 0 px2rem(30);
    .html-p-font-size {
      font-size: px2rem(30);
      color: #333;
      line-height: 26px;
    }
    .look-title {
      color: #d71a1a;
      font-size: px2rem(26);
      line-height: 24px;
    }
  }
  .on-study-list {
    padding: 0 px2rem(30);
    .details-title {
      margin: px2rem(40) 0;
      font-size: px2rem(36);
      color: #312d2d;
      font-weight: bold;
    }
  }
}
</style>
